<template>
  <div>
    <!-- 头部 -->
    <div class="header style2-top"
      :class="[ headerData.show_fx_upgrade ? 'style2-top2': '' ]"
      :style="{ backgroundImage:'url('+headerData.bgImg+')',backgroundSize: '100% auto'}">
      <div class="infoPanel">
        <div class="avatar-box fl">
          <div class="avatar j-render" :style="{ backgroundImage:'url('+headerData.userImg+')'}"></div>
          <div class="outer"></div>
        </div>
        <div class="userinfo fl">
          <p class="nickname clearfix">
            <span class="nickname-title fl" v-if="headerData.nickname">{{ headerData.nickname }}</span>
            <span class="nickname-title fl fontAliBaba" v-else>{{ headerData.mobile }}</span>
            <span
              class="lit-spn bor fl"
              v-if="headerData.chaining_rank"
            >{{ headerData.chaining_rank }}</span>
          </p>

        </div>
        <div class="gotoMail"
              @click="Jump('letter')">
          <span class="num fontAliBaba">{{ getLetterCount(headerData.letterCount) }}</span>
        </div>
        <!-- TODO 小程序订货中心 代理中心 供应商中心不显示二维码 -->
        <template>
          <span class="myif-er j-showQrcode" @click="_show_qrcode()"></span>
        </template>
      </div>
      <div class="cover"></div>
    </div>
    <!-- 导航 -->
    <user-nav v-if="!noNav" :current="9" :memberData="memberData"></user-nav>
   <div class="accountPanel-links">
      <div class="u-id-s2-actions-title">已结算</div>
      <section class="accountPanel accountPanel-s2 clearfix">
        <div class="iner-bor2 iner-flex">
          <div class="item" v-if="replicateCommission.success_superior_commission"><i class="fontAliBaba">{{replicateCommission.success_superior_commission}}</i>
            <p>{{replicateInfo.name_replicate_commission_superior}}</p>
          </div>
          <div class="item" v-if="replicateCommission.success_top_commission"><i class="fontAliBaba">{{replicateCommission.success_top_commission}}</i>
            <p>{{replicateInfo.name_replicate_commission_top}}</p>
          </div>
          <div class="item" v-if="replicateCommission.success_level_commission"><i class="fontAliBaba">{{replicateCommission.success_level_commission}}</i>
            <p>{{replicateInfo.name_replicate_commission_level}}</p>
          </div>
        </div>
      </section>
    </div>
    <div class="accountPanel-links">
      <div class="u-id-s2-actions-title">待结算</div>
      <section class="accountPanel accountPanel-s2 clearfix">
        <div class="iner-bor2 iner-flex">
          <div class="item fl" v-if="replicateCommission.pre_superior_commission"><i class="fontAliBaba">{{replicateCommission.pre_superior_commission}}</i>
            <p>{{replicateInfo.name_replicate_commission_superior}}</p>
          </div>
          <div class="item fl" v-if="replicateCommission.pre_top_commission"><i class="fontAliBaba">{{replicateCommission.pre_top_commission}}</i>
            <p>{{replicateInfo.name_replicate_commission_top}}</p>
          </div>
          <div class="item fl" v-if="replicateCommission.pre_member_commission"><i class="fontAliBaba">{{replicateCommission.pre_member_commission}}</i>
            <p>{{replicateInfo.name_replicate_commission_level}}</p>
          </div>
        </div>
      </section>
    </div>
    <van-popup v-model="showDesc" class="showDescClass">{{recently_desc}}</van-popup>
        <!-- 我的服务 -->
    <div class="mainmodule" v-if="template_style == 1" >
      <div class="mainlist">
        <ul>
          <li>
            <div class="icon_link_member" @click="Jump('nextLevelVender',{type:'1', replicate: replicateInfo.rank})">
              {{replicateInfo.name_replicate_member}}<i class="icon-right"></i>
            </div>
          </li>
          <li>
            <div class="icon_link_order" @click="Jump('venderOrder',{type:'1', replicate: replicateInfo.rank})">
              {{replicateInfo.name_replicate_order}}<i class="icon-right"></i>
            </div>
          </li>
          <li>
            <div class="icon_link_income" @click="Jump('myCommission')">
              {{replicateInfo.name_replicate_commission}}<i class="icon-right"></i>
            </div>
          </li>
          <li>
            <div class="icon_link_product" @click="handleLinkTo('item-list', {link: 2})">
              {{replicateInfo.name_chaining_product}}<i class="icon-right"></i>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="style2-actions clearfix mgt10" v-else-if="template_style == 2">
      <div class="style2-actions-title">我的服务</div>
      <div class="action" @click="Jump('nextLevelVender',{type:  replicateInfo.rank == 2 ? '3' : '1', replicate: replicateInfo.rank})">
        <span class="icon-action icon_link_member"></span>
        <span class="title">{{replicateInfo.name_replicate_member}}</span>
      </div>
      <div class="action" @click="Jump('venderOrder',{type:'1', replicate: replicateInfo.rank})">
        <span class="icon-action icon_link_order"></span>
        <span class="title">{{replicateInfo.name_replicate_order}}</span>
      </div>
      <div class="action" @click="Jump('myCommission')">
        <span class="icon-action icon_link_income"></span>
        <span class="title">{{replicateInfo.name_replicate_commission}}</span>
      </div>
      <div class="action" @click="handleLinkTo('item-list', {link: 2})">
        <span class="icon-action icon_link_product"></span>
        <span class="title">{{replicateInfo.name_replicate_item}}</span>
      </div>
    </div>
    <van-popup v-model="is_show_qrcode" class="code-pop">
      <img :src="qrcode_url" alt />
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import userNav from '@/views/user/components/nav/index'
import { replicateCenter } from '@/api/user/replicate/index'
import { scaleGoodsPrice, scaleGoodsPriceNoMark } from '@/utils/index'

import Vue from 'vue'
import { Popup } from 'vant'
import { Dialog } from 'vant'
Vue.use(Dialog)
Vue.use(Popup)
export default {
  data() {
    return {
      template_style: 0,
      memberData: {},
      linkCommission: {},
      headerData: {
        bgImg: 'https://img.wifenxiao.com/h5-wfx/images/user/member/user_style3_bg_black.png',
        userImg: 'https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg',
        nickname: ''
      },
      replicateInfo: {},
      qrcode_url: '',
      is_show_qrcode: false,
      noNav: false,
      replicateCommission: {},
      recently_data: [],
      recently_now: {
        amount: 0,
        num: 0,
        time: 'today'
      },
      recently_desc: '',
      showDesc: false,
      chaining_direct: {}
    }
  },
  created() {
    this.noNav = !!this.$route.query.noNav
    // console.log('noMav', this.noNav)
    this.init()
  },
  methods: {
    showIconDesc() {
      this.showDesc = true
    },
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)

      replicateCenter().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          // TODO 小程序处理 wxConfig.template_style
            resData.template_style ? this.template_style = resData.template_style : ''
            wx.setNavigationBarTitle({
              title: resData.name_info.name_replicate_center
            })
          // 导航数据
          this.memberData = Object.assign(resData.common_center_parameter, resData.common_center_renovation_parameter)
          this.memberData.user_type = resData.user_identity.user_type
          this.memberData.is_agent = resData.user_identity.is_agent
          this.memberData.is_show_distributor = resData.is_show_distributor
          this.memberData.system_function_model = resData.system_function_model
          this.memberData.is_check_dhs = resData.is_check_dhs
          this.memberData.is_show_dhs = resData.is_show_dhs
          this.memberData.is_wx = resData.is_wx
          this.memberData.is_app = resData.is_app
          this.memberData.is_show_agent = resData.is_show_agent
          this.memberData.is_show_gys = resData.is_show_gys
          this.memberData.supplier_flag = resData.supplier_flag
          this.memberData.is_tgy = resData.is_tgy
          this.memberData.is_dls = resData.is_dls
          this.memberData.ftitle_gys_center = resData.ftitle_gys_center
          // x+1 链动中心 start
          this.memberData.is_chaining = resData.is_chaining || 0
          this.memberData.is_show_chaining = resData.is_show_chaining
          // x+1 链动中心 end
          this.headerData.chaining_rank = resData.identity_info.rank_name
          this.memberData.has_replicate_rank = resData.has_replicate_rank || 0
          this.memberData.is_show_replicate_center = resData.is_show_replicate_center
          //  头部数据打包
          if (resData.common_center_renovation_parameter.top_bg != '') {
            this.headerData.bgImg = resData.common_center_renovation_parameter.top_bg
          }
          this.headerData.userImg = resData.common_center_parameter.avatar
          this.headerData.nickname = resData.nickname
          // console.log('this.headerData', this.headerData)
          // this.qrcode_url = resData.qrcode_url
          // 已结算，未结算
          this.replicateCommission = resData.commission_info
          // 图标
          this.replicateInfo = resData.name_info
          this.replicateInfo.rank = resData.identity_info.rank
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 判断数组是否存在某值
    isExistArray(array, val) {
      if (!array) return false
      const ret = array.indexOf(val)
      if (ret == -1) {
        return false
      } else {
        return true
      }
    },
    // 展示二维码
    _show_qrcode() {
      this.is_show_qrcode = !this.is_show_qrcode
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    handleLinkTo(url, data) {
      this.$JumpName(this, url, data)
    },
    getLetterCount(num) {
      const mailNum = parseInt(num)
      return mailNum > 99 ? '99+' : num <= 0 ? '' : num
    },
    JumpPath(url, data) {
      this.$JumpPath(this, url, data)
    },
    scaleGoodsPriceNoMarkFn(price) {
      return scaleGoodsPriceNoMark(price)
    },
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    }
  },
  computed: {
    ...mapGetters(['wxConfig'])
  },
  components: {
    userNav
  }
}
</script>

<style lang="scss">
@import 'src/styles/user/index.scss';
.recently-data {
    padding-top: 20px;
  .recently-title {
    font-size: 30px;
    border-left: 8px solid #F30C23;
    margin: 0 0 20px 20px;
    padding-left: 20px;
    font-weight: bold;
  }
  .recently-btn {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px 0 24px 0;
    border-bottom: 2px solid #EDEDED;
    div {
      width: 110px;
      background-color: #f2f2f2;
      border-radius: 110px;
      text-align: center;
      font-size: 24px;
      font-weight: 500;
      padding: 10px 0;
      border: 1px solid #f2f2f2;
      overflow: hidden;
      &.active {
        border-color: #F30C23;
        color: #F30C23;
        background-color:#ffebe7
      }
    }
  }
}
.accountPanel-links {
  .accountPanel {
    .iner-bor {
      border: none;
      &.width{
        .item {
          width: 26.3%;
        }
      }
    }
  }
  .u-id-s2-actions-title{
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    line-height: 80px;
    border-bottom: 1px solid #EDEDED;

  }
}
.link-task {
  padding: 0 32px;
  .freeze {
    border-bottom: 1px solid #EDEDED;
    padding: 24px 0;
    font-size: 30px;
    .price-scale{
			font: size 32px!important;;
			.num-font{
				font-size: 48px!important;
			}
		}
  }
  .task-title {
    font-weight: 500;
    font-size: 32px;
    padding: 32px 0;
  }
  .task-list {
    color: #999;
    padding-bottom: 32px;
    font-size: 28px;
  }
}
.link-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.num_dec {
  color:#f30c23
}
// .icon {
//   color: #ff976a;
//   margin-left: 10px
// }
.icon_tip {
  width: 24px;
  height: 24px;
  margin-left: 10px;
  position: relative;
  top: 4px;
}
.showDescClass {
  width: 90%;
  padding: 40px 20px;
  border-radius: 10px;
}
.iner-flex {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>
